<template>
  <el-dialog @closed="handleDialogClose" v-model="props.detailOpen" title="详情信息">
    <el-descriptions title="">
      <el-descriptions-item label="总计订单">{{ resItem.orderCount || '-' }}</el-descriptions-item>
      <el-descriptions-item label="总消费金额">{{ resItem.totalAmount || '-' }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">{{
        resItem.newCreated
      }}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="基本信息">
      <el-descriptions-item label="UID">{{ resItem.id }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{
        resItem.username
      }}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{
        resItem.nickName
      }}</el-descriptions-item>
      <el-descriptions-item label="注册手机">{{
        resItem.phone
      }}</el-descriptions-item>
      <el-descriptions-item label="注册邮箱">{{
        resItem.email
      }}</el-descriptions-item>
      <el-descriptions-item label="所属站点">{{ resItem.websiteName }}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="用户概况" :column="1">
      <el-descriptions-item label="账单地址">{{
        resItem.billAddress || '-'
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="3">
      <!-- <el-descriptions-item label="上次登录时间">{{
        resItem.newLoginDate
      }}</el-descriptions-item>
      <el-descriptions-item label="登录ip">{{
        resItem.loginIp
      }}</el-descriptions-item> -->
      <el-descriptions-item label="上次交易时间">{{ resItem.new_transactionsDate }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["handleDialogClose"]);
const host_type = ref([])
const props = defineProps({
  detailOpen: {
    type: Boolean,
    default: false,
  },

  listId: {
    type: Number,
    default: null,
  },
});
const resItem = ref({});
watch(
  () => props.detailOpen,
  () => {
    if (!props.detailOpen && props.listId) return;
    product.productcustomer
      .productcustomerGetbyid({
        pathParams: {
          id: props.listId,
        },
      })
      .then((res) => {
        res.data = {
          ...res.data,
          new_transactionsDate: proxy.DateTime(res.data.transactionsDate),
          newCreated: proxy.DateTime(res.data.created),
          newLoginDate: proxy.DateTime(res.data.loginDate)
        };
        resItem.value = res.data;
      })
      .catch((err) => { });
  }
);

const handleDialogClose = () => {
  emits("handleDialogClose"); // 触发事件通知父组件关闭
};
onMounted(() => {
  getLanguage()
})
const getLanguage = () => {
  // 所属站点
  site.general
    .sitewebsiteList({
      data: {
        pageNum: 1,
        pageSize: 999,
      },
    })
    .then((res) => {
      host_type.value = res.data;
    });
};
</script>